<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useActionOrderStore } from '../../store/action/actionOrderStore';
import { Calendar, Tickets, SetUp, Edit, Plus, Minus, Money, PriceTag } from '@element-plus/icons-vue'
const actionOrderStore = useActionOrderStore()
// 获取日期类型标签
const getDateTypeTag = (item) => {
    if (item.isHoliday) return { type: 'danger', label: '节假日' }
    if (item.isWeekend) return { type: 'warning', label: '周末' }
    return { type: 'success', label: '工作日' }
}
// 增加票数
const increaseTickets = () => {
    actionOrderStore.increasePrice()
}

// 减少票数
const decreaseTickets = () => {
    actionOrderStore.decreasePrice()
}

</script>
<template>
    <el-dialog v-model="actionOrderStore.isOpen" width="500" align-center>
        <el-card class="header-card" style="border-radius: 20px;" v-if="actionOrderStore.currentActionorder">
            <template #header>
                <div class="card-header">
                    <h2>{{ actionOrderStore.actionName }} - 预约票管理</h2>
                </div>
            </template>
            <div class="exhibition-info">
                <div class="info-item">
                    <el-icon>
                        <Calendar />
                    </el-icon>
                    <span>展览日期: {{ actionOrderStore.actionDate }}</span>
                </div>
                <div class="info-item">
                    <el-icon>
                        <Tickets />
                    </el-icon>
                    <span>总票数: {{ actionOrderStore.currentActionorder.acTicketNumber }}</span>
                </div>
            </div>
            <div class="tickets-grid">
                <div class="ticket-item">
                    <div class="ticket-price">
                        <span class="price-label">票价:</span>
                        <el-input
                            style="width: 200px;--el-input-border-color: transparent; --el-input-hover-border-color: transparent;"
                            v-model="actionOrderStore.currentActionorder.acTicketPrice" placeholder="请输入价格"><template
                                #append>
                                <span
                                    style="padding: 0 10px; background: var(--el-fill-color-light); color: var(--el-text-color-regular);">元</span>
                            </template>
                        </el-input>
                    </div>
                    <div class="ticket-price">
                        <span class="tickets-label">已售出票数：</span>
                        <span class="total-value">{{ actionOrderStore.currentActionorder.acTicketPaidNumber || 0
                            }}</span>
                    </div>
                    <div class="ticket-control">
                        <span class="tickets-label">总票数：</span>
                        <div class="tickets-input-group">
                            <el-button circle :icon="Minus" @click="decreaseTickets()"
                                :disabled="actionOrderStore.currentActionorder.acTicketNumber <= 0" />
                            <el-input-number v-model="actionOrderStore.currentActionorder.acTicketNumber" :min="0"
                                :max="1000" size="small" controls-position="right" />
                            <el-button circle :icon="Plus" @click="increaseTickets()" />
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="actionOrderStore.resetActionOrder">取消</el-button>
                <el-button type="primary" @click="actionOrderStore.addActionOrder">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style scoped>
.header-card {
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h2 {
    margin: 0;
    font-size: 18px;
    color: #303133;
}

.header-actions {
    display: flex;
    gap: 10px;
}

.exhibition-info {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #606266;
}

.tickets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 320px));
    gap: 50px;
    padding: 10px;
    justify-content: center;
    align-items: center;
}

.ticket-item {
    border: 1px solid #ebeef5;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.ticket-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

.ticket-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.date-value {
    font-weight: bold;
    color: #303133;
}

.ticket-price {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.price-label {
    color: #606266;
    margin-right: 8px;
}

.price-value {
    font-weight: bold;
    color: #f56c6c;
    flex-grow: 1;
}

.ticket-control {
    display: flex;
    align-items: center;
}

.tickets-label {
    color: #606266;
    margin-right: 8px;
}

.tickets-input-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-grow: 1;
}

/* 去除 append 区域的左侧边框 */
.input-with-unit .el-input-group__append {
    border-left: none;
    background: transparent;
}

/* 输入框聚焦时同步单位区域样式 */
.input-with-unit:focus-within .el-input-group__append {
    border-color: var(--el-input-focus-border);
}
</style>